<script lang='ts' setup>
import { reactive, ref } from 'vue';
import { addClass, delClass, EditClass, getDept, getStudent, getTeacher } from '@/views/class/getClass';
import { ElMessage, ElMessageBox } from 'element-plus';
import { getToken } from '@/utils/auth';
// 未知区域
// const form = reactive({
//     name: '',
//     region: '',
//     date1: '',
//     date2: '',
//     delivery: false,
//     type: [],
//     resource: '',
//     desc: ''
// });


// 头部input框
const formInline = reactive({
    user: '',
    region: '',
    date: ''
});
// 添加按钮
const addVisible = ref(false);

// 添加表单
function addSave() {
    console.log('保存了');
    addClass(addData).then(res => {
        console.log(res);
        search();
    });
    addVisible.value = false;
}

const addData = reactive({
    deptId: 0,
    name: '',
    userId: 0
});

function selectCollege(id: number) {
    // console.log(1);
    console.log(id);
    addData.deptId = id;
}

function selectTeacher(id: number) {
    // console.log(1);
    console.log(id);
    addData.userId = id;
}

//导入按钮
const updateVisible = ref(false);
//表格
const tableData = ref([]);
// 搜索
const searchParams = reactive({
    deptId: '',
    name: '',
    pageNum: 1,
    pageSize: 5
});
const teacherList = ref([]);

//
function search() {
    getStudent(searchParams).then(res => {
        console.log(res);
        total.value = res.total;
        tableData.value = res.rows;
    });
    getTeacher().then(res => {
        console.log(res);
        teacherList.value = res.rows;
        teacherSelect.value = JSON.parse(JSON.stringify(teacherList.value));

    });
}

// 渲染
search();
// 学院列表
const deptData = ref({
    pageNumber: 1,
    pageSize: 10
});
const deptList = ref({});
const deptSelect = ref({});
const teacherSelect = ref({});
// const option = ref();
getDept(deptData.value).then(res => {
    console.log(res);
    deptList.value = res.data;
    deptSelect.value = JSON.parse(JSON.stringify(deptList.value));

});


//重置
function reset() {
    searchParams.name = '';
    searchParams.deptId = '';
    deptList.value.deptName = '';
    search();
}

// 删除
const DelClass = (id: string) => {

    ElMessageBox.confirm(
        '这将会永久删除此条内容，确认删除吗？',
        '警告',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning'
        }
    )
        .then(() => {
            ElMessage({
                type: 'success',
                message: '已删除'
            });
            console.log(id);
            delClass([id]).then(res => {
                console.log(res);
                search();
            });
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '已取消'
            });
        });
};

// 下拉框搜索
function selectSearch(id: string) {
    // console.log(1);
    console.log(id);
    searchParams.deptId = id;
}

// 编辑
const editVisible = ref(false);

let editData = ref({
    deptId: 0,
    name: '',
    userId: 0,
    id: 0
});

function editBtn(data) {
    editVisible.value = true;
    editData.value = {
        deptId: data.deptId,
        id: data.id,
        userId: data.userId,
        name: data.name
    };
    console.log(editData);
    console.log(data.deptId);
}

function editClass() {
    EditClass(editData.value).then(res => {
        console.log(res);
        search();
        editVisible.value = false;
    });
}

//分页
const total = ref(0);

const baseUrl=import.meta.env.VITE_APP_BASE_API
// 头部携带token
const headers = ref<object>({});
headers.value = {
    Authorization: 'Bearer ' + getToken()
};
</script>

<template>
    <div class='common-layout'>
        <el-container>
            <el-header>  <!--头部-->
                <header>
                    <!--       头部左边-->
                    <div class='left'>
                        <el-form :inline='true' :model='formInline' class='demo-form-inline'>
                            <!--学院名称-->
                            <span><b>
                                选择班级名称
                            </b></span>
                            <el-select
                                v-model='deptList.deptName'
                                filterable
                                placeholder='学院名称'
                                style='width: 240px'
                            >
                                <el-option
                                    v-for='item in deptList'
                                    :key='item.deptId'
                                    :value='item.deptName'
                                    :label='item.deptName'
                                    @click='selectSearch(item.deptId)'
                                />
                            </el-select>
                            <!--班级名称-->
                            <span><b>
                                班级名称
                            </b></span>
                            <el-input
                                v-model='searchParams.name'
                                style='width: 240px'
                                placeholder='请输入班级名称'
                                clearable
                            />
                        </el-form>
                    </div>
                    <!--头部右边-->
                    <div class='right'>
                        <el-button @click='reset'>重置</el-button>
                        <el-button v-hasPermi="['class:query']" type='primary' @click='search'>搜索</el-button>
                    </div>
                </header>
            </el-header>
            <!--            主体内容-->
            <el-main>
                <!--添加按钮-->
                <div class='add'>
                    <el-button v-hasPermi="['class:add']" type='primary' @click='addVisible=true'>添加</el-button>
                    <el-dialog v-model='addVisible' title='添加' width='430px' align='center'>
                        <el-form :inline='true' :model='formInline' class='demo-form-inline'>
                            <!--学院名称-->
                            <div>
                                <span><b>
                                学院名称
                                </b></span>
                                <el-select
                                    v-model='deptSelect.deptName'
                                    filterable
                                    placeholder='请选择学院名称'
                                    style='width: 240px'
                                >
                                    <el-option
                                        v-for='item in deptSelect'
                                        :key='item.deptId'
                                        :value='item.deptName'
                                        @click='selectCollege(item.deptId)'
                                    />

                                </el-select>
                            </div>
                            <!--添加班级-->
                            <div>
                                <span><b>
                                班级名称
                            </b></span>
                                <el-input
                                    v-model='addData.name'
                                    style='width: 240px'
                                    placeholder='请输入班级名称'
                                    clearable
                                />
                            </div>
                            <!--学院名称-->
                            <div>
                                <span><b>
                                负责老师
                                </b></span>
                                <el-select
                                    v-model='teacherSelect.nickName'
                                    filterable
                                    placeholder='请选择学院名称'
                                    style='width: 240px'
                                >
                                    <el-option
                                        v-for='item in teacherSelect'
                                        :key='item.userId'
                                        :value='item.nickName'
                                        @click='selectTeacher(item.userId)'
                                    />
                                </el-select>
                            </div>
                        </el-form>
                        <template #footer>
                            <div class='dialog-footer'>
                                <el-button @click='addVisible=false'>取消</el-button>
                                <el-button type='primary' @click='addSave'>
                                    确定
                                </el-button>
                            </div>
                        </template>
                    </el-dialog>
                </div>

                <!--导入按钮-->
                <el-button type='primary' @click='updateVisible = true'>导入</el-button>

                <!--导入对话框-->
                <el-dialog v-model='updateVisible' title='班级导入' width='500' align='center'>
                    <!--内容-->
                    <el-upload
                        class='upload-demo'
                        drag
                        :action="baseUrl+'/common/upload'"
                        :headers='headers'
                        multiple
                    >
                        <el-icon class='el-icon--upload'>
                            <upload-filled />
                        </el-icon>
                        <div class='el-upload__text'>
                            将文件拖到此处或 <em>点击上传</em>
                        </div>
                        <template #tip>
                            <div class='el-upload__tip'>
                                仅允许导入xls、xlsx格式文件 <a href='#'>下载模板</a>
                            </div>
                        </template>
                    </el-upload>
                </el-dialog>
                <!--表格-->
                <div id='table'>
                    <el-table :data='tableData' border style='width: 100%'>
                        <el-table-column fixed prop='date' label='序号' width='150' align='center' type='index' />
                        <el-table-column prop='college' label='学院名称' align='center' />
                        <el-table-column prop='name' label='班级名称' width='200' align='center' />
                        <el-table-column prop='userName' label='负责老师' width='200' align='center' />
                        <el-table-column prop='createTime' label='创建时间' width='250' align='center' />
                        <!--                        <el-table-column prop='zip' label='' width='120' />-->
                        <el-table-column fixed='right' label='操作' width='200'>
                            <template #default='scope'>
                                <el-button v-hasPermi="['class:edit']" link type='primary' size='small' @click='editBtn(scope.row)'
                                >编辑
                                </el-button
                                >
                                <el-button v-hasPermi="['class:remove']" link type='primary' size='small' @click='DelClass(scope.row.id)'>删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <!--编辑对话框-->
                    <el-dialog v-model='editVisible' title='编辑' width='430px' align='center'>
                        <el-form :inline='true' :model='formInline' class='demo-form-inline'>
                            <!--学院名称-->
                            <div>
                                <span><b>
                                学院名称
                                </b></span>
                                <el-select
                                    v-model='editData.deptId'
                                    filterable
                                    placeholder='请选择学院名称'
                                    style='width: 240px'
                                >
                                    <el-option
                                        v-for='item in deptSelect'
                                        :key='item.deptId'
                                        :value='item.deptId'
                                        :label='item.deptName'
                                        @click='selectCollege(item.deptId)'
                                    />

                                </el-select>
                            </div>
                            <!--添加班级-->
                            <div>
                                <span><b>
                                班级名称
                            </b></span>
                                <el-input
                                    v-model='editData.name'
                                    style='width: 240px'
                                    placeholder='请输入班级名称'
                                    clearable
                                />
                            </div>
                            <!--学院名称-->
                            <div>
                                <span><b>
                                负责老师
                                </b></span>
                                <el-select
                                    v-model='editData.userId'
                                    filterable
                                    placeholder='请选择学院名称'
                                    style='width: 240px'
                                >
                                    <el-option
                                        v-for='item in teacherSelect'
                                        :key='item.userId'
                                        :value='item.userId'
                                        :label='item.nickName'
                                        @click='selectTeacher(item.userId)'
                                    />
                                </el-select>
                            </div>
                        </el-form>
                        <template #footer>
                            <div class='dialog-footer'>

                                <el-button @click='editVisible=false'>取消</el-button>
                                <el-button type='primary' @click='editClass'>
                                    确定
                                </el-button>
                            </div>
                        </template>
                    </el-dialog>
                </div>
                <!--分页-->
                <div id='page'>
                    <el-pagination
                        v-model:current-page='searchParams.pageNum'
                        v-model:page-size='searchParams.pageSize'
                        background
                        layout='prev, pager, next'
                        :total='total'
                        @currentChange='search'
                    />
                </div>
            </el-main>
        </el-container>
    </div>
</template>

<style lang='scss'>
span.el-input__suffix-inner {
    margin: 0 !important;
}

header.el-dialog__header {
    background-color: #1892FF;
    justify-content: center;

    span {
        color: white
    }

    svg {
        color: white
    }
}

.left {
    span {
        margin: 0 10px;
        font-size: 15px;
    }

    div {
        margin: 0 !important;
    }
}

.cell {
    text-align: center;
}

.el-form--default > div {
    margin-bottom: 20px;


}

.demo-form-inline .el-select {
    --el-select-width: 220px;
}

a {
    color: #48A2FF;
}

.add {
    margin-right: 10px;
    display: inline-block;
}

//
//.el-dialog {
//    background: #42b983;
//}

.dialog-footer {
    text-align: center;
}

#table {
    margin: 20px 0;
}

#page {
    display: flex;
    justify-content: right;
    margin: 0 40px 20px;
}

header {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

//.father {
//    overflow: auto;
//    height: 200px;
//    width: 1300px;
//
//    .son {
//        background: black;
//        height: 200px;
//        width: 1300px;
//
//    }
//}

.common-layout {
    padding: 40px;
    //overflow: auto;
}

.demo-form-inline .el-input {
    --el-input-width: 220px;
}

.demo-form-inline .el-select {
    --el-select-width: 220px;
}
</style>
